<template>
  <el-row v-loading="loading" :gutter="24" class="main-box">
    <el-col :span="8" class="flex flex-col" style="height: 100%" :xs="24">
      <ranks class="flex-1" :data="info.noReturnTheChartsStatList" />
      <device class="mt-2 mb-2" :data="info.deviceStatVo" />
      <toolLog class="flex-1" :data="info.toolLendReturnLogStatVoList || []" />
    </el-col>
    <el-col :span="10" :xs="24" style="height: 100%" class="flex flex-col">
      <div class="flex mb-3">
        <el-card shadow="hover" style="flex: 1" class="mr-2">
          <template v-slot:header>
            <div class="k-title">工具在线情况</div>
          </template>
          <div class="mb-xs flex">
            在库数量：
            <el-progress
              style="flex: 1"
              :stroke-width="20"
              :percentage="toolInfo?.toolUsePct?.inStockCount ?? 0"
              color="#46C687"
              status="success"
            >
              <span class="font-bold">{{
                toolInfo?.toolUseStat?.inStockCount ?? 0
              }}</span></el-progress
            >
          </div>
          <div class="flex">
            借出数量：
            <el-progress
              style="flex: 1"
              :stroke-width="20"
              :percentage="toolInfo?.toolUsePct?.lendCount ?? 0"
              status="exception"
              color="#E05156"
            >
              <span class="font-bold">{{
                toolInfo?.toolUseStat?.lendCount ?? 0
              }}</span>
            </el-progress>
          </div>
        </el-card>
        <battery :data="info.facilityList" class="flex-1" />
      </div>
      <el-card shadow="hover" class="mb-2">
        <template v-slot:header>
          <div class="k-title">智能设备在线情况</div>
        </template>
        <div
          v-for="(item, index) in deviceOnline"
          :key="index"
          class="deviceOnline relative text-center"
        >
          <el-image
            :src="item.picUrl"
            fit="fill"
            style="height: 100%"
            :preview-src-list="deviceOnline.map(item => item.picUrl)"
          />
          <div class="tip">{{ item.onlineCount }}</div>
        </div>
        <div />
      </el-card>
      <dayreturnChart
        ref="dayChartRef"
        class="mb-2"
        :data="info.dateStatList"
      />
      <hourChart ref="hourChartRef" :data="info.hourStatList" />
    </el-col>
    <el-col :span="6" :xs="24" style="height: 100%" class="flex flex-col">
      <funnelChart
        v-if="info.userUseTheChartsStatList"
        class="mb-2"
        :data="info.userUseTheChartsStatList"
      />
      <toolStatistics class="mb-2" :data="info.toolLendReturnRecordsVo" />
      <tooRateChart
        v-if="info.facilityFrequencyStatVoList"
        class="mb-2"
        :data="info.facilityFrequencyStatVoList"
      />
      <toolChart
        v-if="info.toolLendTheChartsStatList"
        :data="info.toolLendTheChartsStatList"
      />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import ranks from "./modules/ranks.vue";
import device from "./modules/device.vue";
import toolLog from "./modules/toolLog.vue";
import dayreturnChart from "./modules/dayreturnChart.vue";
import hourChart from "./modules/hourChart.vue";
import funnelChart from "./modules/funnelChart.vue";
import toolStatistics from "./modules/toolStatistics.vue";
import toolChart from "./modules/toolChart.vue";
import tooRateChart from "./modules/tooRateChart.vue";
import battery from "./modules/battery.vue";
// 在线图片
import menjing from "@/assets/board/menjing.png";
import zhongduan from "@/assets/board/zhongduan.png";
import huojia from "@/assets/board/huojia.png";
import tongdaoji from "@/assets/board/tongdaoji.png";

import {
  toolLendReturnLogStats,
  toolFacilityUseStat,
  toolLendReturnFrequencyStats,
  theChartsStat,
  facilityStat
} from "@/api/board";

defineOptions({
  name: "board"
});

// 工具在柜情况 + 智能设备在线情况; (实时更新)
const toolInfo = ref({} as any);

const info = ref({} as any);
const loading = ref(false);

const dayChartRef = ref(null);
const hourChartRef = ref(null);

function getParams() {
  const datasource = (window as any).datasource;
  if (datasource && datasource > 0) {
    return {
      warehouseId: datasource
    };
  }
  return {};
}
const params = getParams();
const initData = async () => {
  loading.value = true;
  await toolFacilityUseStat(params)
    .then(res => {
      toolInfo.value = { ...res.data, toolUsePct: {} };
      getPercentage();
      info.value = { ...info.value, ...res.data };
    })
    .catch(() => (loading.value = false));
  await Promise.all([
    toolLendReturnLogStats(params),
    facilityStat(params),
    toolLendReturnFrequencyStats(params),
    theChartsStat(params)
  ])
    .then(resArr => {
      // console.log(resArr);
      resArr.map(res => {
        info.value = { ...info.value, ...res.data };
      });
    })
    .catch(() => {
      loading.value = false;
    });
  loading.value = false;
  dayChartRef?.value?.initData();
  hourChartRef?.value?.initData();
};
initData();

/* 获取工具在柜情况百分比 */
const getPercentage = () => {
  let inStockCount = toolInfo.value?.toolUseStat?.inStockCount ?? 0;
  let lendCount = toolInfo.value?.toolUseStat?.lendCount ?? 0;

  let max = Math.max(inStockCount, lendCount);

  // 最大区间值
  let maxLen = String(max).length;
  let dm = Number(`1${"0".repeat(maxLen)}`);

  let num1 = parseFloat((inStockCount / dm) * 100);
  let num2 = parseFloat((lendCount / dm) * 100);
  toolInfo.value.toolUsePct = {
    inStockCount: num1,
    lendCount: num2
  };
};

/* 智能设备在线情况 */
const deviceOnline = computed(() => {
  const list = toolInfo?.value?.facilityUseStatList ?? [];
  return list.map(item => {
    // 设施类型(1货架 2门禁 3借还终端)
    let picUrl = "";
    switch (String(item.type ?? "")) {
      case "1":
        picUrl = huojia;
        break;
      case "2":
        picUrl = menjing;
        break;
      case "3":
        picUrl = zhongduan;
        break;
      case "4":
        picUrl = tongdaoji;
        break;
    }
    return { ...item, picUrl };
  });
});
</script>

<style lang="scss" scoped>
body {
  background-color: #f2f2f2 !important;
}

.main-box {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 10px;
  margin: 0 !important;
  // background-color: #f2f2f2 !important;
}

::v-deep(.el-card__header) {
  padding: 5px 10px;
}

::v-deep(.el-card__body) {
  padding: 10px;
}

.flex {
  display: flex;
}

.deviceOnline {
  width: 124px;
  height: 68px;
  background: #f3f4fb;
  padding: 4px 24px;
  border-radius: 4px;
  margin: 2px;
  display: inline-block;
  .tip {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(65, 124, 255, 0.5);
    width: 40%;
    border-top-left-radius: 0.5vw;
    text-align: center;
    font-weight: bold;
    font-size: 3vh;
    color: #fff;
  }
}
</style>
